<template>
  <div>
    <CategoryThree :is-disable="!!showNum" />
    <el-card class="attr-card">
      <!-- 列表展示组件 -->
      <AttrList
        v-if="showNum === 0"
        @changeShowNum="showNum = $event"
        @setToAddAttrData="setData"
      />
      <!-- 添加的组件 -->
      <AddOrUpdateAttr
        v-else
        @changeShowNum="showNum = $event"
        :toAddAttrData="toAddAttrData"
      />
    </el-card>
  </div>
</template>

<script>
import CategoryThree from '@/components/CategoryThree'
import AttrList from './attrList/index.vue'
import AddOrUpdateAttr from './addOrUpdateAttr'
export default {
  name: 'Attr',
  components: {
    CategoryThree,
    AttrList,
    AddOrUpdateAttr
  },
  data() {
    return {
      showNum: 0,
      toAddAttrData: {
        attrName: '',
        tableData: [],
        id: undefined
      }
    }
  },
  methods: {
    setData(data) {
      console.log(data)
      this.toAddAttrData.attrName = data.attrName
      this.toAddAttrData.tableData = data.attrValueList
      this.toAddAttrData.id = data.id
      this.showNum = 1
    }
  }
}
</script>

<style scoped>
.attr-card {
  margin-top: 20px;
}
</style>
